<script setup lang="ts" name="news">
import {ref, onMounted, reactive, computed} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import { useNewsApi } from "/src/api/news";

// 引入组件
import OaConfirm from "/@/components/common/oa-confirm.vue";
import MainHeader from "/@/components/common/main-header.vue";
import OaModal from "/@/components/common/oa-modal.vue";

const lxsAppData = reactive({
	data: [],
	params: {
		page: 1,
		page_size: 10,
	},
	total: 0,
	newsContent: {},
	tips: {
		status: ref(false),
		type: 'error',
		icon: '',
		title: '',
		content: '',
		confirm: '确认删除',
		close: '再想想'
	},
})

// 消息点击
const contentShow = ref(false) // 平台消息内容展示
const detailClick = (id) => {
	contentShow.value = true;
	lxsAppData.newsContent.id = id;
	lxsAppData.newsContent.content = lxsAppData.data.find(item => item.id === id).content;
}

// 删除平台消息弹窗
const news_id = ref(0);
const contentDelete = (id) => {
	news_id.value = id;
	contentShow.value = false;
	lxsAppData.tips.title = '确认要删除该内容吗？';
	lxsAppData.tips.content = '一旦删除无法恢复';
	lxsAppData.tips.status = true;
}

// 删除平台消息确认
const onTipsConfirm = () => {
	lxsAppData.tips.status = false;
	useNewsApi().deleteNewsData({id: news_id.value}).then(data => {
		ElMessage.success(data.message);
		setTimeout(() => {
			getPageData();
			contentShow.value = false;
		}, 700);
	})
}

// 获取页面数据
const getPageData = async () => {
	const res = await useNewsApi().getNewsListData(lxsAppData.params);
	console.log('获取新闻列表数据', res.data);
	lxsAppData.data = res.data.list;
	lxsAppData.total = res.data.total;
}

// 分页改变
const onHandleSizeChange = (val) => {
	lxsAppData.params.page_size = val;
	getPageData();
};
// 分页改变
const onHandleCurrentChange = (val) => {
	lxsAppData.params.page = val;
	getPageData();
};
onMounted(() => {
	getPageData();
});
</script>

<template>
	<div class="layout-container flex">
		<div class="layout-main">

			<MainHeader />

			<div class="main-content">
				<el-card shadow="hover" class="layout-padding-auto">

					<div class="new-box flex-center" v-for="item in lxsAppData.data">
						<div class="new-top flex-between flex-items-center">
							<div class="new-top-left flex-start flex-items-center">
								<img src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/xcx/tab/xiaoxi.png" alt="">
								<div class="flex-center flex-items-center">
									<p>{{ item.class_name }}</p>
									<span>{{ item.send_time }}</span>
								</div>
							</div>
							<div class="new-top-right" v-if="item.is_browse === 0">NEW</div>
						</div>

						<div class="new-content" @click="detailClick(item.id)">
							<img :src="item.background" alt="">
						</div>
					</div>

					<div class="flex-around mt20">
						<el-pagination
							hide-on-single-page
							small
							@size-change="onHandleSizeChange"
							@current-change="onHandleCurrentChange"
							:pager-count="5"
							:page-sizes="[10, 20, 30]"
							v-model:current-page="lxsAppData.params.page"
							background
							v-model:page-size="lxsAppData.params.page_size"
							layout="total, sizes, prev, pager, next, jumper"
							:total="lxsAppData.total"
						>
						</el-pagination>
					</div>

				</el-card>
			</div>

		</div>
	</div>

	<!--  平台消息内容-start	-->
	<el-drawer
		v-model="contentShow"
		direction="rtl"
		size="480"
		:show-close="false"
	>
		<template #header>
			<div class="drawer-header">
				<div class="header-left" @click="contentShow = false">
					<img src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/xcx/tab/%3C.png" alt="">
					<p>平台消息内容</p>
				</div>
				<div class="header-right" @click="contentDelete(lxsAppData.newsContent.id)">
					<img src="https://ouan-retail.oss-cn-shenzhen.aliyuncs.com/web/icon/%E5%88%A0%E9%99%A4.png" alt="">
				</div>
			</div>
		</template>
		<div class="drawer-content">
			<el-image :src="lxsAppData.newsContent.content" lazy fit="widthFix"></el-image>
		</div>
	</el-drawer>
	<!--  平台消息内容-end	-->

	<OaConfirm
		:isVisible="lxsAppData.tips.status"
		:type="lxsAppData.tips.type"
		:title="lxsAppData.tips.title"
		:content="lxsAppData.tips.content"
		:confirm="lxsAppData.tips.confirm"
		:close="lxsAppData.tips.close"
		@confirm="onTipsConfirm"
		@close="() => {lxsAppData.tips.status = false}"
	/>
</template>

<style lang="scss">
@media screen and (max-width: 500px) {
	.el-drawer {
		width: 100% !important;
	}
}
</style>
<style scoped lang="scss">
@media screen and (max-width: 708px) {
	.new-content {
		width: auto !important;
		max-width: 708px !important;
	}
}
.new-box {
	max-width: 732px;
	height: 143px;
	background: #FFFFFF;
	border-radius: 10px;
	border: 1px solid #ECECEC;
	padding: 10px;
	margin: 20px auto 0;

	.new-top {

		.new-top-left {

			img {
				width: 30px;
				height: 30px;
			}

			div {
				p {font-size: 14px; color: #000000;}
				span {font-size: 12px; color: #444444;}
			}
		}

		.new-top-right {
			text-align: center;
			font-size: 12px;
			color: #FFFFFF;
			background: #FF6C63;
			border-radius: 3px 3px 3px 3px;
			padding: 2px 5px;
		}
	}

	.new-content {
		width: 708px;
		height: 77px;
		margin: 10px auto;
		border-radius: 10px;
		cursor: pointer;

		img {
			width: 100%;
			height: 100%;
			border-radius: 10px;
		}
	}
}
</style>